<template>
	<div>
		<div class="app-container">
			<slot
				name="tableAction"
				:options="options"
				:choice="searchControl.choice"
				:query="searchControl.query"
				:editable="editControl.editable"
				:selectAction="selectAction"
				:insertAction="insertAction"
				:batchDeleteAction="batchDeleteAction"
			>
				<div class="handle-box">
					<el-select
						v-show="selectAction"
						v-model="searchControl.choice"
						placeholder="搜索类型"
						clearable
						@change="choiceChange"
					>
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
					<el-input
						v-if="!inputOption || inputOption.type === 'value'"
						v-show="selectAction"
						v-model="searchControl.query[searchControl.choice]"
						class="input_25 mgn_20"
						placeholder="关键词"
						clearable
					/>
					<el-select
						v-else-if="inputOption.type === 'category'"
						v-show="selectAction"
						v-model="searchControl.query[searchControl.choice]"
						class="input_25 mgn_20"
						placeholder="请选择"
						clearable
					>
						<el-option
							v-for="item in inputOption.options"
							:key="item.label"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
					<el-date-picker
						v-else
						v-show="selectAction"
						v-model="searchControl.query[searchControl.choice]"
						class="input_25 mgn_20"
						type="datetimerange"
						clearable
						range-separator="至"
						start-placeholder="开始日期时间"
						end-placeholder="结束日期时间"
					/>
					<el-button
						v-show="selectAction"
						class="mgn_20"
						type="primary"
						icon="el-icon-search"
						@click="select"
					>
						搜索
					</el-button>
					<el-button
						v-show="insertAction"
						class="mgn_20"
						icon="el-icon-plus"
						@click="handleInsertCommand"
						:disabled="editControl.editable"
					>
						添加
					</el-button>
					<el-button
						v-show="batchDeleteAction"
						class="mgn_20"
						type="danger"
						icon="el-icon-delete"
						@click="handleBatchDeleteCommand"
					>
						批量删除
					</el-button>
				</div>
			</slot>
			<el-table
				class="el-table-font"
				:data="tableControl.tableData"
				border
				stripe
				fit
				v-loading="tableControl.loading"
				@sort-change="sortChange"
				@select="selectChange"
				@select-all="selectChange"
				:header-cell-style="handleHeaderStyle"
				ref="table"
			>
				<el-table-column
					v-if="batchDeleteAction"
					type="selection"
					align="center"
					width="55"
				/>
				<slot name="tableColumn">
					<el-table-column
						v-for="item in tableOptions"
						:key="item.value"
						sortable="custom"
						:prop="item.value"
						:label="item.label"
						align="center"
						:width="item.type === 'time' ? 220 : null"
					>
						<template #default="{row}">
							<slot :name="item.value" :tableOption="item" :row="row">
								<template v-if="item.type === 'value'">
									<el-input
										v-show="item.editable && row.editable"
										v-model="row[item.value]"
									/>
									<span v-show="!item.editable || !row.editable">
										{{
											item.format
												? item.format(row[item.value])
												: row[item.value]
										}}
									</span>
								</template>
								<template v-else-if="item.type === 'category'">
									<el-select
										v-show="item.editable && row.editable"
										v-model="row[item.value]"
										placeholder="请选择"
										clearable
									>
										<el-option
											v-for="item in item.options"
											:key="item.label"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
									<span v-show="!row.editable">
										{{ item.format(row[item.value]) }}
									</span>
								</template>
								<template v-else>
									<el-date-picker
										v-show="item.editable && row.editable"
										v-model="row[item.value]"
										type="datetime"
										clearable
										placeholder="选择日期时间"
									/>
									<span v-show="!item.editable || !row.editable">
										{{ item.format(row[item.value]) }}
									</span>
								</template>
							</slot>
						</template>
					</el-table-column>
				</slot>
				<slot
					name="tableColumnAction"
					:updateAction="updateAction"
					:deleteAction="deleteAction"
				>
					<el-table-column
						v-if="updateAction || deleteAction"
						label="操作"
						align="center"
					>
						<template #default="{row}">
							<div v-show="row.editable">
								<el-button
									v-show="row.editable"
									type="text"
									icon="el-icon-check"
									class="save"
									@click="handleSaveSure(row)"
								>
									保存
								</el-button>
								<el-button
									v-show="row.editable"
									type="text"
									icon="el-icon-close"
									class="edit"
									@click="handleSaveClose(row)"
								>
									取消
								</el-button>
							</div>
							<div v-show="!row.editable">
								<el-button
									v-show="updateAction"
									type="text"
									icon="el-icon-edit"
									class="edit"
									:disabled="editControl.editable"
									@click="handleUpdateCommand(row)"
								>
									编辑
								</el-button>
								<el-button
									v-show="deleteAction"
									type="text"
									icon="el-icon-delete"
									class="delete"
									@click="handleDeleteCommand(row)"
								>
									删除
								</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						v-else-if="insertAction && editControl.editable"
						label="操作"
						align="center"
					>
						<template #default="{row}">
							<div>
								<el-button
									type="text"
									icon="el-icon-check"
									class="save"
									@click="handleSaveSure(row)"
								>
									保存
								</el-button>
								<el-button
									type="text"
									icon="el-icon-close"
									class="edit"
									@click="handleSaveClose(row)"
								>
									取消
								</el-button>
							</div>
						</template>
					</el-table-column>
				</slot>
			</el-table>

			<div
				:class="{ hidden: pageControl.total <= 5 }"
				class="pagination-container"
			>
				<el-pagination
					:page-sizes="[5, 10, 25, 50, 100]"
					:page-size="pageControl.pageSize"
					:background="true"
					layout="sizes, prev, pager, next, jumper"
					:total="pageControl.total"
					:current-page="pageControl.current"
					@current-change="currentChange"
					@size-change="pageSizeChange"
					@prev-click="currentChange"
					@next-click="currentChange"
				></el-pagination>
			</div>
		</div>

		<el-dialog
			title="删除提示"
			:visible.sync="deleteControl.deletable"
			width="300px"
			center
		>
			<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleDeleteCancel">取 消</el-button>
				<el-button type="danger" @click="handleDeleteSure">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import manageTable from './ManageTableModel';

	export default {
		mixins: [manageTable]
	};
</script>

<style lang="scss" scoped>
	.handle-box {
		margin-bottom: 20px;
		float: left;

		.input_25 {
			width: 25%;
			min-width: 220px;
		}

		.mgn_20 {
			margin-left: 20px;
		}

		.el-date-editor {
			width: 400px;
		}
	}

	.user-avatar img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.el-table-font {
		width: 100%;
		font-size: 14px;

		.el-date-editor {
			width: 100%;
			min-width: 200px;
		}

		.save {
			color: #67c23a;
		}

		.edit {
		}

		.delete {
			color: #ff0000;
		}
	}

	.pagination-container.hidden {
		display: none;
	}
</style>
